<template>
  <div class="financial">
    <TitleLable label="综合投后分析" sub-label="（财务类指标）">
      <template #right>
        <div class="underline" @click="companyShow = true">项目详情</div>
      </template>
    </TitleLable>
    <div
      class="table-box pointer"
      @click="
        show = true;
        companyName = '';
      "
    >
      <el-row class="head">
        <el-col :span="11"><div>目标</div></el-col>
        <el-col :span="6"><div>实际</div></el-col>
        <el-col :span="7"><div>完成率</div></el-col>
      </el-row>
      <el-row class="body" v-for="(item, index) in tableData" :key="index">
        <el-col :span="5">
          <div>{{ item.name }}</div>
        </el-col>
        <el-col :span="6">
          <div v-if="item.target">
            <span class="blue">{{ item.target }}</span> {{ item.unit }}
          </div>
          <div v-else>-</div>
        </el-col>
        <el-col :span="6">
          <div v-if="item.reality">
            <span class="blue">{{ item.reality }}</span> {{ item.unit }}
          </div>
          <div v-else>-</div>
        </el-col>
        <el-col :span="7">
          <div v-if="item.rate">
            <span class="blue">{{ item.rate }}</span>
            %
          </div>
          <div v-else>-</div>
        </el-col>
      </el-row>
    </div>
    <!-- 项目综合投后公司明细 -->
    <el-dialog
      append-to-body
      :visible.sync="companyShow"
      width="1680px"
      custom-class="cockpit-container cockpit-dialog financial-table-modal"
    >
      <template #title>
        <div>
          <el-row type="flex" align="middle">
            <div class="title">
              <span>项目综合投后分析</span>
            </div>
          </el-row>
          <div
            class="hit blue underline pointer"
            @click="goTo('项目管理/被投企业')"
          >
            企业清单
          </div>
        </div>
      </template>
      <TabelModal @onCompanyName="onCompanyName" />
    </el-dialog>

    <!-- 项目综合投后分析 -->
    <el-dialog
      append-to-body
      :visible.sync="show"
      width="1260px"
      custom-class="cockpit-container cockpit-dialog financial-table-modal"
    >
      <template #title>
        <div>
          <el-row type="flex" align="middle">
            <div class="title">
              <span>综合投后分析</span>
            </div>
          </el-row>
          <div
            class="hit blue underline pointer"
            @click="goTo('运营管理/企业数据/企业分析：' + companyName)"
          >
            {{ companyName }}
          </div>
        </div>
      </template>
      <FourChart />
    </el-dialog>
  </div>
</template>

<script>
import TitleLable from "../TitleLable/index.vue";
import TabelModal from "./TabelModal.vue";
import FourChart from "./FourChart.vue";
export default {
  name: "Financial",
  components: { TitleLable, TabelModal, FourChart },
  data() {
    return {
      companyShow: false,
      companyName: "",
      show: false,
      tableData: [
        {
          name: "资产总额",
          target: "",
          reality: "789.68",
          rate: "",
          unit: "亿",
        },
        {
          name: "营业收入",
          target: "112.04",
          reality: "105.13",
          rate: "0.94",
          unit: "亿",
        },
        {
          name: "利润总额",
          target: "4.48",
          reality: "4.62",
          rate: "100.03",
          unit: "亿",
        },
        {
          name: "平均投资回报率",
          target: "",
          reality: "",
          rate: "",
          unit: "%",
        },
      ],
    };
  },
  methods: {
    onCompanyName(item) {
      this.show = true;
      this.companyShow = false;
      this.companyName = item.gsmc;
    },
    goTo(path) {
      this.$message("进入平台：" + path);
    },
  },
};
</script>

<style lang="scss" scoped>
.financial {
  height: 285px;

  .table-box {
    margin-top: 10px;

    .body:last-child .el-col {
      min-height: 62px;
    }
  }
}
</style>
